<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background-color: #eeeeee;
            font-family: "楷体";
        }

        .item {
            margin: 20px;
            margin-bottom: 50px;
        }

        .imte_top {
            text-align: center;
        }

        .imte_top > span {
            font-size: 14px;
            display: inline-block;
            padding: 5px 12px;
            background-color: #ddd;
            color: #fff;
            border-radius: 5px;
        }

        .item_content {
            background-color: #fff;
            padding: 25px 15px;
            margin-top: 6px;
        }

        .item_content_top_1 {
            font-size: 24px;
            font-weight: bold;
        }

        .item_content_top_2 {
            color: #eee;
            font-size: 14px;
            margin: 5px 0px;
        }

        .item_content_top_3 {
            margin: 10px 0px;
        }

        .item_content_top_4 {
            margin: 10px 0px;
        }

        .item_content_bottom > a {
            text-decoration: none;
            color: #33e;
        }
    </style>
    <script src="/jQuery/jquery-3.6.0.min.js"></script>
    <script src="/layer/layer.js"></script>
</head>
<body>
<script>
    const content = $('<div class="content">\n' +
        '    <div class="item">\n' +
        '        <div class="imte_top">\n' +
        '            <span>2019-10-12 12:00</span></div>\n' +
        '        <div class="item_content">\n' +
        '            <div class="item_content_top">\n' +
        '                <div class="item_content_top_1">取件通知</div>\n' +
        '                <div class="item_content_top_2">2019-10-12 12:00</div>\n' +
        '                <div class="item_content_top_3">您有一个包裹到e栈了!</div>\n' +
        '                <div class="item_content_top_4">\n' +
        '                    <div>取件码:<span style="color:#05a">123123</span></div>\n' +
        '                    <div>快递公司:顺丰快递</div>\n' +
        '                    <div>运单号码:123123123213</div>\n' +
        '                    <div>站点电话:13843838438</div>\n' +
        '                    <div>取件地址:学校快件集散中心</div>\n' +
        '                </div>\n' +
        '            </div>\n' +
        '            <hr>\n' +
        '            <div class="item_content_bottom">\n' +
        '                <a href="personQRcode.jsp?code=<%=e.getCode()%>">二维码</a>\n' +
        '            </div>\n' +
        '        </div>\n' +
        '    </div>\n' +
        '</div>');

    function createContent(kuaidi) {
        let k = content.clone();
        let b = kuaidi.status === '未取出';
        $('.imte_top>span', k).html(kuaidi.deposit_time);
        $('.item_content_top_2', k).html(kuaidi.deposit_time);
        $('.item_content_top_4>div:eq(0)', k).html('取件码:<span style="color:#05a">' + kuaidi.pickup_code+'</span>');
        $('.item_content_top_4>div:eq(1)', k).html('快递公司:' + kuaidi.company);
        $('.item_content_top_4>div:eq(2)', k).html('运单号码:' + kuaidi.single_number);
        $('.item_content_top_4>div:eq(3)', k).html('站点电话:'+(kuaidi.depositor_phone||'无'));
        $('.item_content_bottom>a',k).attr('href','/api/wx/createQRCode?type=express&code='+kuaidi.pickup_code);
        if (!b){
            $('.item_content_top_4>div:eq(4)', k).remove();
            $('.item_content_top_4>div:eq(0)', k).remove();
            $('.item_content_top_1',k).html('取件成功通知');
            $('.item_content_top_3',k).html('您有一个包裹从e栈取出了!');
            $('.item_content_bottom',k).html('<a href="#">有疑问 ? 点了也没用</a>');
        }
        return k;
    }

    $(function () {
        function bdate(a,b){
            if (a.length!==b.length) return a.length - b.length;
            for (let i=0;i<a.length;i++){
                if (a[i]!==b[i]){
                    return Number(a[i]) -Number(b[i]);
                }
            }
            return 0;
        }
        $.getJSON('/api/wx/findExpressList', null, function (data) {
            if (data.status < 0) {
                layer.msg(data.result);
                return;
            } else {
                let kuadiList = data.data;
                if (kuadiList.length ===0){
                    let exnull = $('<div class="content">快递为空</div>');
                    exnull.css({
                        width: 'max-content'
                    });
                    return $('body').html(exnull);
                }
                kuadiList.sort(function (a,b){
                    a= (a.status === '未取出'?a.deposit_time:a.take_out_time);
                    b= (b.status === '未取出'?b.deposit_time:b.take_out_time);
                    return bdate(b,a);
                });
                kuadiList.forEach(val => {
                    $('body').append(createContent(val));
                });
            }
        })
    })
</script>

</body>
</html>